<template>
    <div class="info-content">
        <el-form label-width="80px">
            <el-form-item label="文本标题">
                <el-input v-model="list.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="标题字号">
                <el-input-number v-model="list.titleFontSize" :min="1" :max="50" controls-position="right"></el-input-number>
            </el-form-item>
            <el-form-item label="标题颜色">
                <el-color-picker v-model="list.titleFontColor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="文本内容">
                <el-input type="textarea" :rows="4" v-model="list.remarks" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="内容字号">
                <el-input-number v-model="list.remarksFontSize" :min="1" :max="50" controls-position="right" label="标题字号"></el-input-number>
            </el-form-item>
            <el-form-item label="内容颜色">
                <el-color-picker v-model="list.remarksFontColor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="背景颜色">
                <el-color-picker v-model="list.backgroundColor" show-alpha></el-color-picker>
            </el-form-item>
        </el-form>
        <template v-if="list.data" >
            <el-button 
                type="primary" 
                icon="el-icon-plus" 
                @click="addImage(null)"
                class="add-image"
            >
                添加背景图
            </el-button>
        </template>
        <el-upload
            ref="upload"
            :http-request="upload"
            :show-file-list="false"
            multiple
            action
            style="display:none"
        >
        </el-upload>
    </div>
</template>

<script>
export default {
    name: 'Texts',
    props: ['data', 'className'],
    data() {
        return {
            list: {
                
            }
        }
    },
    mounted() {
        this.list = this.data;
        if (!this.list.titleFontSize && !this.list.titleFontSize) {
            this.$set(this.list,'titleFontSize', 16);
            this.$set(this.list,'remarksFontSize', 16);
        }
        
    },
    methods: {
        addImage(index) {
			this.imageIndex = index
			this.$refs['upload'].$children[0].$refs.input.click()
        },
        upload(params) {
            const len = this.list.data.length;
            
            if (len >= this.len) {
                this.$message.error(`最多添加${this.len}张图片!`);
                return
            }
			const file = params.file,
			    fileType = file.type;

            const verifyList = [
                    {
                        text: "只能上传图片格式png、jpg、gif!",
                        result: fileType.indexOf('image') != -1
                    },
                    {
                        text: "只能上传大小小于5M",
                        result: file.size / 1024 / 1024 < 5
                    }
                ]

            for (let item of verifyList) {
                if (!item.result) {
                    this.$message.error(item.text)
                    return
                }
            }

			const form = new FormData();
			form.append("file", file);
			form.append("clientType", "multipart/form-data");

            const index = this.imageIndex
            const data = { 
                name: file.name, 
                url: URL.createObjectURL(file), 
                form
            }
            
            if (index !== null) {
                this.$set(this.list.data, index, data)
            } else {
                this.list.data.push(data)
            }
		}
    }
}
</script>

<style lang="scss" scoped>
.info-content{
    padding: 20px;
}

</style>